import React from 'react';
import {welcomde} from '../style/imgs'
import BreadcrumbCustom from './BreadcrumbCustom';

class HomePage extends React.Component {

    state = {
        height: document.body.clientHeight,
    };

    componentWillMount() {
        window.onresize = () => {
            this.setState({
                height: document.body.clientHeight
            });
        }
    }

    render() {
        let height = document.body.clientHeight -114;
        height <= 782 && (height = 782);
        return (
            <div>
                <div style={{marginLeft: 16}}>
                    <BreadcrumbCustom first={'主页'}/>
                </div>
                <div className={'background'} style={{height:height}}>
                    <div className={'title'}>WELCOME</div>
                    <div className={'sub-title'}>进入WPS升级服务管理系统</div>
                    <div className={'welcome-img'}><img src={welcomde}/></div>
                </div>
                <style>{`
                    .ant-layout-content{
                        margin:0 !important;
                    }
                    .background{
                        background-image: linear-gradient(to top, #ddecfc, #ffffff);
                        padding-bottom:54px;
                    }
                    .title{
                        font-family: 微软雅黑;
                        font-size: 76px;
                        color: #0b79d7;
                        padding-top: 108px;
                        text-align: center;
                        line-height: 60px;
                        height:60px;
                    }
                    .sub-title{
                        font-family: 微软雅黑;
                        font-size: 24px;
                        color: #50a7f1;
                        padding-bottom:98px;
                        padding-top:88px;
                        text-align: center;
                        line-height: 24px;
                        height:24px;
                    }
                    .welcome-img{
                        text-align: center;
                    }
                `}</style>
            </div>
        );
    };
}

export default HomePage;